import React from "react";
import { View } from "@tarojs/components";
import { MajorItem } from "@/src/pages/index/data";
import Image from "@/components/Image";
import organizationIcon from "@/images/icon_organization.png";
import "./index.scss";

type ItemData = MajorItem & {
  agentList?: any[];
  isShowAgent?: boolean;
  onClick?: () => void;
};

const Index: React.FC<ItemData> = (props: ItemData) => {
  return (
    <View className="item-card" onClick={props.onClick && props.onClick}>
      <Image className="logo" src={props.icons} />
      <View className="item-con">
        <View className="name">{props.name}</View>
        <View className="desc">{props.content}</View>
        {props.isShowAgent && (
          <View className="agent-info">
            <View className="agent-it">
              <Image className="icon" src={organizationIcon} />
              <View className="text">
                {props.agentList &&
                  props.agentList.map(
                    (item, index) =>
                      `${item.name}${
                        index < props.agentList?.length - 1 ? ";" : ""
                      }`
                  )}
              </View>
            </View>
            <View className="remark">
              {props.agentList?.length === 0 && "暂无机构"}
              {props.agentList?.length === 1 && "1家机构为你服务"}
              {props.agentList?.length > 1 &&
                `等${props.agentList?.length}家机构为你服务`}
            </View>
          </View>
        )}
      </View>
    </View>
  );
};

export default Index;
